<template>
  <div class="page-wrap">
    <div class="logo"></div>
    <div class="login-wrap">
      <p class="login-title">重置账号密码</p>
      <p><a-input size="large" placeholder="用户名" /></p>
      <p class="login-line8"></p>
      <p><a-input-password size="large" placeholder="新的密码" /></p>
      <p class="login-line8"></p>
      <p><a-input-password size="large" placeholder="确定密码" /></p>
      <p class="login-line20"><a-button size="large" type="primary" block> 立 即 重 置 </a-button></p>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'login',
}
</script>

<style lang="scss" scoped>
.page-wrap {
  width: 100%;
  min-height: 100vh;
  .logo {
    position: relative;
    top: 80px;
    font-size: 32px;
    font-weight: bold;
    width: 320px;
    height: 92px;
    margin: 0 auto 28px;
    background: url('https://sf1-ttcdn-tos.pstatp.com/obj/motor-img/9520f4d9f7c09c5ddb9abb069267c72d') no-repeat;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .login-wrap {
    position: relative;
    top: 80px;
    width: 440px;
    margin: 0 auto;
    border-radius: 6px;
    background: #fff;
    padding: 24px 40px;
    .login-title {
      height: 48px;
      line-height: 48px;
      font-size: 18px;
      color: #333;
      font-weight: 700;
    }
    .login-line8 {
      height: 8px;
    }
    .login-line20 {
      margin-top: 28px;
    }
  }
}
</style>
